<template>
  <!-- 详情-基本信息 -->
  <div class="page">
    <h3>方案信息</h3>
    <detail-table :list="baseInfo" :info="form" v-if="form.id"></detail-table>
    <!-- 领取客户后显示联系人详情 -->
    <h3>赠送卡券</h3>
    <zm-table-data :data="tableParams.data" :columns="givingCouponColumnsInfo" :fetch="loadList" :table-params="tableParams" :show-page="false" :create-fetch="flag">
      <div @click="flag = true" slot="empty" class="no-data">
          查看卡券信息
      </div>
    </zm-table-data>
  </div>
</template>

<script>
import DetailTable from '@/components/zmDetailTable'
import tableMixin from '@/mixins/zmTableMixin'
import { base, givingCouponColumns } from './const'
import { getProgramDetail, getProgramSendInfo } from '@/api/src/sendCouponSet'

export default {
  name: 'BasicInformation',
  components: {
    DetailTable
  },
  mixins: [tableMixin],
  props: {
    id: {
      type: String,
      default: ''

    }
  },
  data () {
    return {
      base,
      givingCouponColumns,
      form: {
        id: '', // 方案ID
        name: '', // 方案名称
        timeTypeDes: '', // 有效期
        typeDes: '', // 方案类型
        payTypeDes: '', // 支付类型
        sceneDes: '', // 触发场景
        productTypeDes: '', // 使用产品
        receiveTypeDes: '', // 领取方式
        updateTime: '', // 修改日期
        type: '' // 1 根据销售单绑定卡券 2 根据会员支付订单数 3 根据会员购票数量
      },
      flag: false
    }
  },
  computed: {
    baseInfo () {
      return this.base(this)
    },
    givingCouponColumnsInfo () {
      return this.givingCouponColumns(this)
    }
  },
  created () {
    this.getInfo()
  },
  methods: {
    async getInfo () {
      const data = await getProgramDetail({ id: this.id })
      this.form = Object.assign({}, this.form, data)
    },
    async loadList () {
      const data = await getProgramSendInfo({ id: this.id })
      this.initialTableData(data.list)
    }
  }
}
</script>

<style scoped lang="scss">
.el-form-item {
  width: 50%;
}
.el-form-item__label {
  background: #ccc !important;
}
/deep/.el-table__empty-text{
  height: 60px;
  line-height: unset;
  width: unset;
}

.no-data {
  overflow: hidden;
    position: relative;
  margin-top: 15px;
  padding: 5px 10px;
  border: 1px solid #0079fe;
  border-radius: 5px;
  color: #0079fe;
  cursor: pointer;
  transition: background-color .2s;
}
.no-data::before {
    content: "";
    position: absolute;
    width: 50px;
    height: 200%;
    background-color: rgba(255, 255, 255, .6);
    transform: skew(45deg) translate3d(-200px,0,0);
}
.no-data:hover::before {
    transition: ease-in-out .5s;
    transform: skew(45deg) translate3d(300px,0,0);
}
.no-data:hover {
    background-color: #0079fe;
    color: #fff;
     border: 1px solid #2c3e50;
}

</style>
